<template>
  <el-container class="official-account-management_material-management">
    <el-main>
      <el-card shadow="never" class="selectCard">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="名称：">
                <el-input v-model="searchParams.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="素材状态：">
                <el-select v-model="searchParams.asyncStatus">
                  <el-option value="" label="全部" />
                  <el-option value="0" label="未同步" />
                  <el-option value="1" label="已同步" />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <SearchButton :default-params="searchParams" @refreshParams="refreshParams" @getList="getList1" />
        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <el-tabs v-model="params.sourceType" type="border-card" @tab-click="handleClick">
          <el-tab-pane name="PIC">
            <span slot="label"><i class="el-icon-picture" />图片</span>
            <div style="display: flex-box;">
              <div style="display: flex;">
                <UploadBtn :name="'新增'" :file-filter="['bmp', 'png', 'jpeg', 'gif']" :max-size="2" @setUrl="addUrl" />
                <el-button type="sccess" icon="el-icon-plus" @click="syncMediaSourceFromWx('PIC')">同步公众号素材</el-button>
              </div>
              <div style="float: right;vertical-align: top;">
                <el-button type="sccess" icon="el-icon-refresh" @click="getList()" />
              </div>
            </div>
            <p>支持bmp/png/jpeg/gif格式，大小不超过2M</p>
            <PicMediaSource :key="key" :props-list="picMediaSourceList" @del="del" @uploadMediaSource="uploadMediaSource" />
            <vxe-pager
              :current-page.sync="searchParams.pageNum"
              :page-size.sync="searchParams.pageSize"
              :total="total"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              @page-change="getList()"
            />
          </el-tab-pane>
          <el-tab-pane name="VOICE">
            <span slot="label"><i class="el-icon-phone" />语音</span>
            <div>
              <UploadBtn :name="'新增'" :file-filter="['mp3', 'wma', 'wav', 'amr', 'audio/mpeg', 'm4a']" :max-size="2" @setUrl="addUrl" />
              <p>支持mp3/wma/wav/amr格式，大小不超过2M</p>
              <VoiceMediaSource :key="key" :props-list="voiceMediaSourceList" @del="del" @uploadMediaSource="uploadMediaSource" />
              <vxe-pager
                :current-page.sync="params.pageNum"
                :page-size.sync="params.pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getList()"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane name="VIDEO">
            <span slot="label"><i class="el-icon-share" />视频</span>
            <div>
              <el-button class="mb15" type="primary" size="small" @click="openDialog">新增</el-button>
              <VideoMediaSource :key="key" :props-list="videoMediaSourceList" @del="del" @uploadMediaSource="uploadMediaSource" />
              <vxe-pager
                :current-page.sync="params.pageNum"
                :page-size.sync="params.pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getList()"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane name="THUMB">
            <span slot="label"><i class="el-icon-picture" />缩略图</span>
            <UploadBtn :name="'新增'" :file-filter="['bmp', 'png', 'jpeg', 'gif']" :max-size="2" @setUrl="addUrl" />
            <p>支持bmp/png/jpeg/gif格式，大小不超过2M</p>
            <PicMediaSource :key="key" :props-list="thumbMediaSourceList" @del="del" @uploadMediaSource="uploadMediaSource" />
            <vxe-pager
              :current-page.sync="params.pageNum"
              :page-size.sync="params.pageSize"
              :total="total"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
              @page-change="getList()"
            />
          </el-tab-pane>
          <el-tab-pane name="MUSIC">
            <span slot="label"><i class="el-icon-phone" />音乐</span>
            <div>
              <UploadBtn :name="'新增'" :file-filter="['mp3', 'wma', 'wav', 'amr', 'audio/mpeg', 'm4a']" :max-size="2" @setUrl="addUrl" />
              <p>支持mp3/wma/wav/amr格式，大小不超过2M</p>
              <VoiceMediaSource :key="key" :props-list="musicMediaSourceList" @del="del" @uploadMediaSource="uploadMediaSource" />
              <vxe-pager
                :current-page.sync="params.pageNum"
                :page-size.sync="params.pageSize"
                :total="total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
                @page-change="getList()"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane name="IMAGE_TEXT">
            <span slot="label"><i class="el-icon-news" />图文</span>
            <div>
              <ImageTextMediaSource ref="imgText" :key="key" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
    <el-dialog v-if="formVisible" title="新增视频" :close-on-click-modal="false" :visible.sync="formVisible">
      <el-form ref="dialogForm" :model="addParams" :rules="dialogRules" label-width="6rem">
        <el-row>
          <!-- <el-col :span="24">
            <el-form-item label="视频名称">
              <div>{{ addParams.name }}</div>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item prop="remark" label="描述">
              <el-input v-model="addParams.remark" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="name" label="视频">
              <div>
                <UploadBtn :file-filter="['video/mp4']" :max-size="2" @setUrl="addUrl" />
                <div>支持mp4格式，大小不超过2M</div>
                <div v-if="addParams.name">{{ addParams.name }}</div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSure">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import UploadBtn from '@/components/upload/uploadBtn'
import PicMediaSource from './components/picMediaSource'
import VoiceMediaSource from './components/voiceMediaSource'
import VideoMediaSource from './components/videoMediaSource'
import ImageTextMediaSource from './components/imageTextMediaSource'
import SearchButton from '@/components/SearchButton'
import { checkVaildWxMp, delMediaSource, listMediaSource, addMediaSource, uploadMediaSource, syncMediaSourceFromWx } from '@/api/wxMp'
// import { searchMaterial, imgTextList } from '@/api/wxMp'
export default {
  components: {
    SearchButton,
    UploadBtn,
    PicMediaSource,
    VoiceMediaSource,
    VideoMediaSource,
    ImageTextMediaSource
  },
  data() {
    return {
      dialogRules: {
        remark: [{ required: true, message: '请填写描述', trigger: 'blur' }],
        name: [{ required: true, message: '请上传视频', trigger: 'blur' }]
      },
      formVisible: false,
      title: '',
      dialogFormVisible: '',
      key: 1,
      searchParams: {
        sourceType: 'PIC',
        appId: '',
        name: '',
        asyncStatus: '',
        pageNum: 1,
        pageSize: 20
      },
      params: {
        appId: '',
        sourceType: 'PIC',
        asyncStatus: '',
        name: '',
        pageNum: 1,
        pageSize: 20
      },
      addParams: {
        appId: '',
        name: '',
        sourceType: '',
        path: '',
        remark: ''
      },
      picMediaSourceList: [],
      voiceMediaSourceList: [],
      videoMediaSourceList: [],
      thumbMediaSourceList: [],
      musicMediaSourceList: [],
      total: 0
    }
  },
  created() {
    this.CheckVaildMpAcount()
  },
  methods: {
    syncMediaSourceFromWx(type) {
      this.$confirm('确定要从公众号同步素材, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        syncMediaSourceFromWx({ type }).then(res => {
          if (res) {
            this.getList()
          }
        })
      })
    },
    uploadMediaSource(id) {
      uploadMediaSource({ id }).then(res => {
        this.$message.success('同步成功！')
        this.getList()
      })
    },
    handleClick(tab, event) {
      this.searchParams.sourceType = tab.name
      this.params.pageNum = 1
      this.getList()
    },
    CheckVaildMpAcount() {
      checkVaildWxMp().then(res => {
        if (res) {
          if (res === undefined) {
            alert('公众号没有授权，请授权后再操作1!')
            this.$router.push(`/wxMp/wxMpAuthorize`)
          } else {
            const objRes = JSON.parse(JSON.stringify(res))
            this.params.appId = objRes.appId
            this.addParams.appId = objRes.appId
            this.searchParams.appId = objRes.appId
            this.getList()
          }
        } else {
          alert('公众号没有授权，请授权后再操作2!')
          this.$router.push(`/wxMp/wxMpAuthorize`)
        }
      })
    },
    getList() {
      if (this.searchParams.sourceType === 'IMAGE_TEXT') {
        this.$refs.imgText.params.asyncStatus = this.params.asyncStatus
        this.$refs.imgText.getList()
      } else {
        listMediaSource({ ... this.searchParams }).then(res => {
          if (this.searchParams.sourceType === 'PIC') {
            this.picMediaSourceList = res.records
          } else if (this.searchParams.sourceType === 'VOICE') {
            this.voiceMediaSourceList = res.records
          } else if (this.searchParams.sourceType === 'VIDEO') {
            this.videoMediaSourceList = res.records
          } else if (this.searchParams.sourceType === 'THUMB') {
            this.thumbMediaSourceList = res.records
          } else if (this.searchParams.sourceType === 'MUSIC') {
            this.musicMediaSourceList = res.records
          }
          this.total = res.total
          this.key++
        })
      }
    },
    openDialog() {
      this.addParams = {
        appId: this.params.appId,
        sourceType: this.params.sourceType,
        name: '',
        path: '',
        remark: ''
      }
      this.formVisible = true
    },
    addUrl(url, name = '') {
      this.addParams.name = name
      this.addParams.sourceType = this.params.sourceType
      this.addParams.path = url
      if (this.params.sourceType === 'VIDEO') {
        this.$refs.dialogForm.clearValidate('name')
      } else {
        addMediaSource(this.addParams).then(res => {
          this.getList()
        })
      }
    },
    clickSure() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          addMediaSource(this.addParams).then(res => {
            this.formVisible = false
            this.$message.success('新增成功！')
            this.getList()
          })
        }
      })
    },
    del(id, type) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 未同步0  已同步1
        // 0删除微信素材  1都删除
        delMediaSource({ id, type }).then(res => {
          this.getList()
          this.$message.success('删除成功！')
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    getList1() {
      this.addParams.appId = this.params.appId
      this.getList()
    },
    refreshParams(params) {
      this.params = params
      this.addParams.appId = this.params.appId
      this.getList()
    }
  }
}
</script>

<style>
.official-account-management_material-management {}
</style>
